<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./area.js"></script>
    <style>
        form {
            margin: 100px;
            text-align: center;
        }

        select {
            margin-right: 30px;
            width: 100px;
        }
    </style>
</head>

<body>
    <form action="">
        <select id="sheng">

        </select>
        <select id="shi">

        </select>
        <select id="qu">

        </select>
    </form>
    <script>
        var province = document.querySelector('#sheng'); // 获取省份的下拉菜单
        var city = document.querySelector('#shi'); // 获取市的下拉菜单
        var count = document.querySelector('#qu'); // 获取区的下拉菜单
        var sindex = 0; // 用来记录省的索引
        var cindex = 0; // 用来记录市的索引
        

        for (let i = 0; i < place.data.length; i++) {
            // 先渲染省的菜单
            province.innerHTML += `<option>${place.data[i].provname}</option>`
        }

        province.onchange = function () {
            // 设置省的变化其他的也跟着变化
            //选择省份之后，市区跟着变化
            cityData(); // 声明一个函数 用来装市的变化
            countData(); // 声明一个函数 用来装区的变化
        }
        cityData();
        function cityData() {
            city.innerHTML = '';
            sindex = province.selectedIndex; // 获取省的索引值
            var cityList = place.data[sindex].city; // 将获取的城市给这个变量
            for (let i = 0; i < cityList.length; i++) {// 渲染出市的菜单
                city.innerHTML += `<option>${cityList[i].cityname}</option>`;
            }

        }
        city.onchange = function () { // 设置市的变化其他的也跟着变化
            //选择城市之后，区跟着变化
            countData();                                           
        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
        countData();
        function countData() {// 打包区的函数
            count.innerHTML = '';// 每次变化请除上一次的样式
            cindex = city.selectedIndex;// 获取市的索引值
            var countList = place.data[sindex].city[cindex].dist; // 将获取的区给这个变量
            for (let i = 0; i < countList.length; i++) {//渲染出区的菜单
                count.innerHTML += `<option>${countList[i]}</option>`;
                
            }
        }
    </script>

</body>

</html>